<template>
  <div class="add-area">
    <el-form
      :model="curAreaInfo"
      ref="curAreaInfo"
      label-width="100px"
      class="demo-curAreaInfo"
    >
      <el-form-item label="模式" prop="resource">
        <el-radio-group v-model="curAreaInfo.mode" :disabled="areaIsFreeze">
          <el-radio label="single">单一模式</el-radio>
          <el-radio label="list">列表模式</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="区域名称" prop="name">
        <el-input
          v-model="curAreaInfo.name"
          :disabled="areaIsFreeze"
        ></el-input>
      </el-form-item>
      <el-form-item label="语音播报内容" prop="name">
        <el-input
          v-model="curAreaInfo.value"
          :disabled="areaIsFreeze"
        ></el-input>
        <el-popover placement="bottom-start" width="200" trigger="click" :disabled="areaIsFreeze">
          <el-card class="box-card" width="100%">
            <el-tag
              @click="tagClick"
              :key="tag"
              v-for="tag in dynamicTags"
              :disable-transitions="false"
            >
              {{ tag }}
            </el-tag>
          </el-card>
          <el-button class="insert-var-btn" slot="reference"
            >插入变量</el-button
          >
        </el-popover>
      </el-form-item>
      <el-form-item label="类型" prop="role">
        <el-select
          v-model="curAreaInfo.role"
          placeholder="请选择活动区域"
          :disabled="areaIsFreeze"
        >
          <el-option label="按钮" value="button"></el-option>
          <el-option label="文本" value="text"></el-option>
          <el-option label="提示框" value="alertdialog"></el-option>
          <el-option label="链接" value="link"></el-option>
          <el-option label="标题" value="heading"></el-option>
          <el-option label="列表" value="listbox"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="焦点是否显示" prop="hidden">
        <el-select
          v-model="curAreaInfo.hidden"
          placeholder="请选择活动区域"
          :disabled="areaIsFreeze"
        >
          <el-option label="显示" value="false"></el-option>
          <el-option label="隐藏" value="true"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="高级query" prop="selector">
        <el-input v-model="curAreaInfo.selector" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="图片唯一表示" prop="xpath">
        <el-input v-model="curAreaInfo.xpath" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('curAreaInfo')"
          >保存区域</el-button
        >
        <el-button @click="resetForm('curAreaInfo')">重置</el-button>
      </el-form-item></el-form
    >
  </div>
</template>

<script>
export default {
  name: 'addArea',
  props: {
    domData: {
      type: Object,
      default: {
        domTree: '',
        domText: '',
        domCount: '',
        xpath: ''
      }
    },
    areaIsFreeze: {
      type: Boolean,
      default: true
    },
    varSumArr: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      curAreaInfo: {
        mode: "",
        name: "",
        value: "",
        role: "",
        hidden: "",
        selector: "",
        xpath: "",
        announceChildren: true
      },
      areaArr: [],
      //   rules: {
      //     name: [
      //       { required: true, message: '请输入活动名称', trigger: 'blur' },
      //       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //     ],
      //     region: [
      //       { required: true, message: '请选择活动区域', trigger: 'change' }
      //     ],
      //     date1: [
      //       { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      //     ],
      //     date2: [
      //       { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      //     ],
      //     type: [
      //       { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      //     ],
      //     resource: [
      //       { required: true, message: '请选择活动资源', trigger: 'change' }
      //     ],
      //     desc: [
      //       { required: true, message: '请填写活动形式', trigger: 'blur' }
      //     ]
      //   },

      dynamicTags: []
    }
  },
  computed: {
     pageAriaContent(){
      return this.$store.state.saveAreaInfo.saveApiInfo
    }
  },
  watch: {
    domData: {
      handler (newValue) {
        console.log(newValue);
        this.curAreaInfo.selector = newValue.domTree
        this.curAreaInfo.xpath = newValue.xpath
      },
      deep: true
    },
    varSumArr: {
      handler (newValue) {
        newValue.forEach((item) => {
          this.dynamicTags.push(item.varName)
        })
      },
      deep: true
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.areaArr.push(this.curAreaInfo)
          await this.$store.commit('setText', this.curAreaInfo)
          const ariaIframe = document.getElementById('id-iframe-aria-ur1')
          ariaIframe.contentWindow.postMessage({
            code: 'UNFREEZE',
            fromAriaAdmin: true
          }, '*')
          ariaIframe.contentWindow.postMessage({
            code: 'ARIA_MARK_DOM',
            ariaData: {...this.pageAriaContent}
          }, '*')
          this.curAreaInfo = {
            mode: "",
            name: "",
            value: "",
            role: "",
            hidden: "",
            selector: "",
            xpath: "",
            announceChildren: true
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    tagClick (value) {
      console.log(value.target.innerText);
      this.curAreaInfo.value = this.curAreaInfo.value + '${' + value.target.innerText + '}'
    }
  }
}
</script>

<style scoped>
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.insert-var-btn {
  float: right;
}
</style>